<template>
  <div>
    <div>
      <div v-if="showDetail" class="fix-item-wrapper2">
        <div class="fix-item-one">
          <div class="fix-item-name">
            <div
              v-if="!target.isOpen && target.hrMonthlySalarySummaryVOList && target.hrMonthlySalarySummaryVOList.length > 0"
              class="showIcon"
              style="cursor: pointer"
              @click="openClick(target)"
            >
              <a-icon type="plus" />
            </div>
            <div
              v-if="target.isOpen && target.hrMonthlySalarySummaryVOList && target.hrMonthlySalarySummaryVOList.length > 0"
              class="showIcon"
              style="cursor: pointer"
              @click="openClick(target)"
            >
              <a-icon type="minus" />
            </div>
            <div
              v-if="!target.hrMonthlySalarySummaryVOList || target.hrMonthlySalarySummaryVOList.length === 0"
              class="noShowIcon"
              style="cursor: pointer"
            >
              <a-icon type="file-text" theme="filled" />
            </div>
            <a-tooltip :title="target.name">
              <div style="width: 75%; overflow: hidden; word-break: break-all; text-overflow: ellipsis">
                {{ target.name }}
              </div>
            </a-tooltip>
          </div>
        </div>
        <div class="fix-item-two">
          <div style="width: 25%; text-align: center; text-align: left">
            <div class="childContentName">{{ target.empNumber ? target.empNumber : 0 }}人</div>
          </div>
          <div style="width: 25%; text-align: center; text-align: left" v-if="customerDetailsType === 'salary'">
            <div class="childContentName">{{ target.shouldWages ? target.shouldWages : 0 }}元</div>
          </div>
          <div style="width: 25%; text-align: center; text-align: left" v-if="customerDetailsType === 'salary'">
            <div class="childContentName">{{ target.paidWages ? target.paidWages : 0 }}元</div>
          </div>
          <div style="width: 25%; text-align: center; text-align: left" v-if="customerDetailsType === 'social'">
            <div class="childContentName">{{ target.enterpriseSocialSecurity ? target.enterpriseSocialSecurity : 0 }}元</div>
          </div>
          <div style="width: 25%; text-align: center; text-align: left" v-if="customerDetailsType === 'social'">
            <div class="childContentName">{{ target.enterpriseProvidentFund ? target.enterpriseProvidentFund : 0 }}元</div>
          </div>
          <div style="width: 25%; text-align: center; text-align: left" v-if="customerDetailsType === 'customer'">
            <div class="childContentName">{{ target.laborCost ? target.laborCost : 0 }}元</div>
          </div>
          <div style="width: 25%; text-align: center; text-align: left">
            <div class="childContentName">{{ target.serviceCharge ? target.serviceCharge : 0 }}元</div>
          </div>
          <div style="width: 25%; text-align: center; text-align: left">
            <div class="childContentName">{{ target.customerFees ? target.customerFees : 0 }}元</div>
          </div>
        </div>
        <div class="fix-item-three">
          <div>
            <a-button type="link" @click="goDetail(target)">详情</a-button>
            <a-popconfirm v-if="target.type === 'company'" :title="'确定删除?'" @confirm="deleteItem(target)">
              <a-icon slot="icon" type="question-circle-o" style="color: red" />
              <a-button type="link">删除</a-button>
            </a-popconfirm>
          </div>
        </div>
      </div>
      <div v-show="target.isOpen && target.hrMonthlySalarySummaryVOList">
        <div v-for="(item2, index2) in target.hrMonthlySalarySummaryVOList" :key="index2">
          <item-customer
            :target="item2"
            :customerDetailsType="customerDetailsType"
            @openClick="openClick"
            @goDetail="goDetail"
            @deleteItem="deleteItem"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ItemCustomer",
  components: {},
  mixins: [],
  props: {
    showDetail: {
      type: Boolean,
      default: true
    },
    customerDetailsType: {
      type: String,
      default: ""
    },
    target: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    openClick(item) {
      this.$emit("openClick", item);
    },
    goDetail(item) {
      this.$emit("goDetail", item);
    },
    deleteItem(item) {
      this.$emit("deleteItem", item);
    }
  }
};
</script>
<style lang="scss" scoped>
.showIcon {
  width: 32px;
  height: 32px;
  background: var(--primary10);
  border-radius: 8px;
  margin-right: 12px;
  color: var(--primary);
  line-height: 32px;
  text-align: center;
}
.noShowIcon {
  width: 32px;
  height: 32px;
  background: var(--primary);
  border-radius: 8px;
  margin-right: 12px;
  color: #ffffff;
  line-height: 32px;
  text-align: center;
}

.fix-item-wrapper2:hover {
  background: var(--primary10);
}

.fix-item-wrapper2 {
  display: flex;
  height: 64px;
  background: #ffffff;
  border-top: none;
  border-radius: 4px;
  padding-left: 33px;
  display: flex;
  .childpProjectName {
    font-size: 10px;
    font-weight: 300;
    color: #767885;
  }
  .childContentName {
    font-size: 15px;
    font-weight: 500;
    color: #55565d;
  }
  .fix-item-one {
    height: 40px;
    display: flex;
    align-self: center;
    padding-left: 10px;
    width: 20%;
    border-right: 1px solid #e8e8e8;
  }
  .fix-item-two {
    padding-left: 45px;
    margin-top: 10px;
    width: 65%;
    height: 45px;
    padding-right: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-right: 1px solid #e8e8e8;
  }
  .fix-item-three {
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fix-item-name {
    width: 100%;
    padding-right: 20px;
    font-size: 18px;
    font-weight: 500;
    margin-top: 6px;
    color: #222426;
    display: flex;
    overflow: hidden;
    word-break: break-all; //强行换行,将截断英文单词
    text-overflow: ellipsis; //当元素内文本溢出时（超过width部分）显示省略标记（...）
    white-space: nowrap;
  }
}
</style>
